<template>
  <Card class="search-form">
    <i-form
        ref="queryFormRef"
        :model="where"
        :label-width="100"
        label-position="right"
        :inline="true"
        class="login-log-form">
      <FormItem label="系统模块" prop="title">
        <Input v-model="where.title" placeholder="请输入系统模块"/>
      </FormItem>
      <FormItem label="操作人员" prop="oper_name">
        <Input v-model="where.oper_name" placeholder="请输入操作人员"/>
      </FormItem>
      <FormItem label="类型" prop="type">
        <Select v-model="where.type">
          <Option :value="0">其他</Option>
          <Option :value="1">新增</Option>
          <Option :value="2">删除</Option>
          <Option :value="3">修改</Option>
          <Option :value="4">查询</Option>
        </Select>
      </FormItem>
      <FormItem label="状态" prop="status">
        <Select v-model="where.status">
          <Option :value="0">正常</Option>
          <Option :value="1">异常</Option>
        </Select>
      </FormItem>
      <FormItem label="操作时间" prop="oper_time">
        <DatePicker
            type="datetimerange"
            format="yyyy-MM-dd HH:mm:ss"
            width="300px"
            v-model="where.select_time"
            @on-ok="formatSelectTime"
            placeholder="请选择操作时间"></DatePicker>
      </FormItem>
      <Space wrap class="btn-group">
        <Button type="primary" @click="getLoginLogLists" v-preventReClick v-perms="['oper_log/lists']">查询</Button>
        <Button type="default" @click="resetQueryForm" v-preventReClick>重置</Button>
      </Space>
    </i-form>
  </Card>
  <Card>
    <Space wrap class="btn-group">
      <Button type="error" @click="clearAllOperLog" v-preventReClick v-perms="['oper_log/clear_oper_log']">清空所有操作日志
      </Button>
    </Space>
    <vxe-table
        style="margin-top: 20px"
        align="center"
        border
        :column-config="{resize:true}"
        :data="operLogData">
      <vxe-column field="title" title="操作模块"/>
      <vxe-column title="操作类型">
        <template #default="{row}">
          <Tag type="border" color="default" v-if="row.type === 0">其他</Tag>
          <Tag type="border" color="success" v-if="row.type === 1">新增</Tag>
          <Tag type="border" color="error" v-if="row.type === 2">删除</Tag>
          <Tag type="border" color="warning" v-if="row.type === 3">修改</Tag>
          <Tag type="border" color="primary" v-if="row.type === 4">查询</Tag>
        </template>
      </vxe-column>
      <vxe-column field="oper_name" title="操作人员"/>
      <vxe-column field="oper_ip" title="操作地址" show-overflow/>
      <vxe-column field="oper_location" title="操作地点" show-overflow/>
      <vxe-column title="操作状态">
        <template #default="{row}">
          <Tag type="border" color="success" v-if="row.status == 0">成功</Tag>
          <Tag type="border" color="error" v-if="row.status == 1">失败</Tag>
        </template>
      </vxe-column>
      <vxe-column field="oper_time" title="操作日期" width="180"/>
      <vxe-column title="操作" width="100">
        <template #default="{row}">
          <Tag color="#2db7f5" size="medium" style="cursor:pointer;" @click="seeDetail(row)" v-preventReClick
               v-perms="['oper_log/detail']">详情
          </Tag>
        </template>
      </vxe-column>
    </vxe-table>

    <vxe-pager
        align="right"
        size="medium"
        v-model:current-page="page.currentPage"
        v-model:page-size="page.pageSize"
        :total="page.totalResult"
        @page-change="handlePageChange">
    </vxe-pager>
  </Card>

  <Modal
      v-model="operLogDetailShow"
      title="操作日志详情"
      :footer-hide="true"
      width="90%">
    <OperLogDetail ref="operLogDetailRef" v-if="operLogDetailShow"></OperLogDetail>
    <div slot="footer" style="display: flex;justify-content:right;margin-top: -10px" class="btn-group">
      <Button type="default" @click="cancel" v-preventReClick>关闭</Button>
    </div>
  </Modal>
</template>

<script setup>

import {getCurrentInstance, inject, nextTick, onMounted, reactive, ref, watchEffect} from "vue";
import {LogService} from "@/api/log";
import {Select, Option, DatePicker} from "view-ui-plus";
import {deepCloneObj} from "@/api/utils";
import OperLogDetail from "@/components/log/oper-log-detail";

const reload = inject('reload');

const {proxy} = getCurrentInstance();

const operLogData = ref([]);

const where = reactive({
  title: '',
  type: '',
  oper_name: '',
  status: '',
  select_time: ''
})

const page = reactive({
  currentPage: 1,
  pageSize: 10,
  totalResult: 0
});

const operLogDetailShow = ref(false);

const getLoginLogLists = async () => {
  const whereParam = deepCloneObj(where);
  delete whereParam.select_time;
  const {data} = await LogService.GetOperLogLists({
    where: whereParam,
    page: page.currentPage + ',' + page.pageSize
  })
  console.log(data.data.lists)
  if (data.code === 200) {
    operLogData.value = data.data.lists
    page.totalResult = data.data.total
  }
}

const handlePageChange = ({currentPage, pageSize}) => {
  console.log(currentPage, pageSize)
  page.currentPage = currentPage;
  page.pageSize = pageSize;
  getLoginLogLists();
}

const resetQueryForm = () => {
  proxy.$refs['queryFormRef'].resetFields();
  where.select_time = ''
  getLoginLogLists();
}

const formatSelectTime = () => {
  where.select_time[0] = where.select_time[0].getTime() / 1000;
  where.select_time[1] = where.select_time[1].getTime() / 1000;
  const param = where.select_time;
  where.oper_time = param.join();
}

const clearAllLoginLog = async () => {
  proxy.$Modal.confirm({
    title: '删除操作确认',
    content: '<p>确定执行删除操作?执行成功后数据将不可恢复。</p>',
    onOk: () => {
      postClearLoginLog();
    },
    onCancel: () => {
      return;
    }
  })
}

const postClearLoginLog = async () => {
  const {data} = await LogService.ClearAllLoginLog();
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload();
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject();
      }
    })
  }
}

const seeDetail = async (e) => {
  operLogDetailShow.value = true;
  await nextTick();
  await proxy.$refs.operLogDetailRef.getOperLogDetail(e.log_id);
}

const cancel = () => {
  operLogDetailShow.value = false;
}

const clearAllOperLog = async () => {
  proxy.$Modal.confirm({
    title: '删除操作确认',
    content: '<p>确定执行删除操作?执行成功后数据将不可恢复。</p>',
    onOk: () => {
      postClearOperLog();
    },
    onCancel: () => {
      return;
    }
  })
}

const postClearOperLog = async () => {
  const {data} = await LogService.ClearAllOperLog();
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload();
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        Promise.reject();
      }
    })
  }
}

onMounted(() => {
  getLoginLogLists();
})

</script>

<style scoped lang="less">
@import "./oper-log.less";
</style>
